<?php
$db = new DBQuery;
$proHot = $db->query('SELECT pro_name,pro_id FROM product ORDER BY pro_id DESC LIMIT 0,5;');

?>
<div class="pro123icon fl">
    <h3>Sản phẩm nổi bật</h3>
    <ul class="proHot-index">
        <li class="" id="li1"><a href="<?=generate_detail_url('products',$proHot[0])?>"><?php echo cut_string($proHot[0]['pro_name'],20)?></a>
			<input type="hidden" class="id" value="<?php echo $proHot[0]['pro_id']?>" />
		</li>
        <li class="inactive" id="li2"><a href="<?=generate_detail_url('products',$proHot[1])?>"><?php echo cut_string($proHot[1]['pro_name'],20)?></a>
			<input type="hidden" class="id" value="<?php echo $proHot[1]['pro_id']?>" />
		</li>
        <li class="inactive" id="li3"><a href="<?=generate_detail_url('products',$proHot[2])?>"><?php echo cut_string($proHot[2]['pro_name'],20)?></a>
			<input type="hidden" class="id" value="<?php echo $proHot[2]['pro_id']?>" />
		</li>
        <li class="inactive" id="li4"><a href="<?=generate_detail_url('products',$proHot[3])?>"><?php echo cut_string($proHot[3]['pro_name'],20)?></a>
			<input type="hidden" class="id" value="<?php echo $proHot[3]['pro_id']?>" />
		</li>
        <li class="inactive" id="li5"><a href="<?=generate_detail_url('products',$proHot[4])?>"><?php echo cut_string($proHot[4]['pro_name'],20)?></a>
			<input type="hidden" class="id" value="<?php echo $proHot[4]['pro_id']?>" />
		</li>
       
    </ul>
</div>
<div class="proHot-info fl">
	<img class="narrow-tip"/>
	<div class="proinfo-index">
		
	</div>
    <div class="prodetail-index"><a href="#">Xem ảnh</a></div>
</div>
<script>
$(function(){
	var i=0;
	var flag=0;
	setInterval(function(){
		if(flag){
			return false;
		}
		k = i%5 + 1;
		$('.proHot-index').find('li').addClass('inactive');
		$('#li'+k).removeClass('inactive');
		i++;
		if(i>10) i=0;
	},5000);
	$('.proHot-index li').click(function(){
		var id = $(this).find('.id').val();
		data = {'id':id,'name':'product_hotinfo'};
		loadModule('.proinfo-index',data,true);
		$('.proHot-index li').addClass('inactive');
		$(this).removeClass('inactive');
		flag=1;
		$('.videoIntro').animate({
			width:0,
			height:0,
			marginLeft:'800px',
			opacity:0,
		},500);
		$('.proHot-info').animate({
			width:'570px',
			height:'360px',
			margin:'30px',
			opacity:1,
		});
        url = $(this).find('a').attr('href');
        $('.prodetail-index a').attr('href',url);
		return false;
		
	});
});
</script>